<template>
  <div>
    <div class="login-container">
      <div class="login-box">
        <div class="title">
          <h2>你好,欢迎登录!</h2>
          <p>欢迎来到用户出租后台管理！</p>
        </div>

        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入账号"
              :prefix-icon="User"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              show-password
            />
          </el-form-item>

          <el-form-item prop="captcha">
            <div class="captcha-container">
              <el-input v-model="loginForm.captchaCode" placeholder="请输入验证码" />
              <img
                :src="logincaptchaImg"
                alt="验证码"
                class="captcha-img"
                @click="refreshCaptcha"
              />
            </div>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              class="login-button"
              :loading="loading"
              @click="handleLogin"
              style="height: 40px; width: 90px; font-size: 16px"
            >
              登录
            </el-button>
            <el-button
              type="success"
              class="login-button"
              :loading="loading"
              @click="register"
              style="height: 40px; width: 90px; font-size: 16px"
            >
              注册
            </el-button>
            <el-button
              type="Danger"
              class="login-button"
              :loading="reback"
              @click="handleLogin"
              style="height: 40px; width: 90px; font-size: 16px"
            >
              找回
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import instance from "../utils/request";
import router from "../router/router";
import { ElMessage } from "element-plus";

// 获取验证码图片
const logincaptchaImg = ref("");

// 登录表单数据
const loginForm = reactive({
  username: "",
  password: "",
  captchaCode: "",
  captchaKey: "",
});

// 表单验证规则
const loginRules = {
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度不能小于6位", trigger: "blur" },
  ],
  captcha: [{ len: 4, message: "验证码长度必须为4位", trigger: "blur" }],
};

// 刷新验证码
const refreshCaptcha = async () => {
  // 实现刷新验证码的逻辑
  try {
    const captchaImg = await instance.get("/admin/login/captcha");
    logincaptchaImg.value = captchaImg.data.data.image; // 更新 logincaptchaImg.value
    loginForm.captchaKey = captchaImg.data.data.key;

    console.log(logincaptchaImg.value);
    console.log(loginForm.captchaKey);
  } catch (error) {
    console.error("获取验证码失败:", error);
  }
};
// 浏览器进去自动刷新
onMounted(() => {
  refreshCaptcha();
});
// 登录处理
const handleLogin = async () => {
  try {
    const res = await instance.post("/admin/login", loginForm);
    if (res.data.code === 200) {
      localStorage.setItem("token", res.data.data);
      localStorage.setItem("username", loginForm.username);
      // 登录成功后跳转到首页
      router.push('/home/page');
      ElMessage.success("登录成功");
    } else if (res.data.code === 307) {
      ElMessage.error("用户名或密码错误");
    } else if (res.data.code === 302) {
      ElMessage.error("验证码错误");
    } else if (res.data.code === 303) {
      ElMessage.error("验证码已过期");
    } else if (res.data.code === 308) {
      ElMessage.error("该用户已被禁");
    } else {
      ElMessage.error("登录失败");
    }
  } catch (error) {
    console.error("登录出错:", error);
    ElMessage.error("登录失败");
  }
};
</script>
<style scoped>
.login-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #6366f1, #8b5cf6);
  min-height: 100vh;
  z-index: 1000;
}

.login-box {
  width: 400px;
  padding: 40px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  margin-bottom: 30px;
}

.title h2 {
  font-size: 28px;
  color: #fff;
  margin-bottom: 10px;
  font-weight: 600;
}

.title p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
}

.login-form {
  width: 100%;
}

.captcha-container {
  display: flex;
  gap: 10px;
}

.captcha-img {
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
}
/* .login-button:hover {
  background: linear-gradient(45deg, #5457ea, #7a4ef5);
} */
</style>
